<template>
  <div class="app-container">
    <div class=" mb-20">
      <el-button type="primary" size="small" @click="dialogFormVisible=true,isUpdate=false">新建</el-button>
    </div>
    <el-table
      :data="list"
      style="width: 100%;margin-bottom: 20px;"
      :row-key="getRowKeys"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
        label="菜单名"
        sortable>
        <template slot-scope="scope">
          <span v-if="scope.row.id">{{scope.row.permissionName}}</span>
          <span v-else>{{scope.row.menuName}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="id"
        label="菜单id"
        sortable>
      </el-table-column>
      <el-table-column
        prop="menuCode"
        label="菜单代码"
        sortable>
      </el-table-column>
      <el-table-column
        prop="permissionCode"
        label="权限代码">
      </el-table-column>
      <el-table-column
        label="是否必选">
        <template slot-scope="scope">
          {{scope.row.requiredPermission | formatBoolean}}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="280">
        <template slot-scope="scope">
          <div v-if="scope.row.id">
            <el-button type="danger" size="mini" @click="removePermission(scope.row.id)">删除</el-button>
            <el-button type="success" size="mini" @click="showEdit(scope.row)">编辑</el-button>
          </div>
          <div v-else>
            <el-link @click="appendNode(scope.row.children)" type="primary">添加</el-link>

          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-if="!$route.params.id" title="新增修改菜单" :visible.sync="dialogFormVisible" width="600px">
      <div class="dialog-body">
        <el-form label-position="right">
          <el-form-item label="id" label-width="120px" v-if="!isAddParent">
            <el-input type="" v-model="permissionParent.id" style="width: 350px;"></el-input>
          </el-form-item>
          <el-form-item label="菜单代码" label-width="120px">
            <el-input type="" v-model="permissionParent.menuCode" style="width: 350px;"></el-input>
          </el-form-item>
          <el-form-item label="菜单名称" label-width="120px">
            <el-input type="" v-model="permissionParent.menuName" style="width: 350px;"></el-input>
          </el-form-item>
          <div v-if="!isAddParent">
            <el-form-item label="权限代码" label-width="120px">
              <el-input type="" v-model="permissionParent.permissionCode" style="width: 350px;"></el-input>
            </el-form-item>
            <el-form-item label="权限名称" label-width="120px">
              <el-input type="" v-model="permissionParent.permissionName" style="width: 350px;"></el-input>
            </el-form-item>
            <el-form-item label="是否必选" label-width="120px">
              <el-radio v-model="permissionParent.requiredPermission" :label=1>必选</el-radio>
              <el-radio v-model="permissionParent.requiredPermission" :label=2>非必选</el-radio>
            </el-form-item>
          </div>
        </el-form>

      </div>
      <div class="dialog-footer">
        <el-button @click="doPostData()" type="primary">保存</el-button>
        <el-button @click="dialogFormVisible=false">取消</el-button>
      </div>

    </el-dialog>

  </div>
</template>
<script>
  let tempData ={
    id:'',
    menuCode: '',
    menuName: '',
    permissionCode: '',
    permissionName: '',
    requiredPermission: 1
  }
  export default {
    data() {
      return {
        list: [],
        dialogFormVisible: false,
        permissionParent: tempData,
        isAddParent:true,
        isUpdate:false
      }
    }, created() {
      this.getList()
    },
    filters: {
      formatBoolean(value) {
        if (typeof (value) !== "undefined") {
          return value === 1 ? "是" : "否"
        } else {
          return ""
        }
      }
    }, methods: {
      getList() {
        this.api({
          url: `/user/listPermission`,
          method: 'get'
        }).then(resp => {
          this.list = resp
        })
      },
      getRowKeys(row) {
        return row.id + row.menuName
      },
      getMenuName(row) {
        console.log(row)
        return row
      },
      addPermission() {
        if(this.isAddParent){
          this.permissionParent.permissionName='列表'
          this.permissionParent.permissionCode=this.permissionParent.menuCode+':list'

        }else{
          this.permissionParent.permissionCode=this.permissionParent.menuCode+':'+this.permissionParent.permissionCode

        }
        let s =this.isAddParent?1:0
        this.api({
          url:`/user/addPermission/`+s,
          method: 'post',
          data:this.permissionParent
        }).then(resp=>{
          this.$message.success("添加成功")
          this.dialogFormVisible=false
          this.permissionParent=tempData
          this.getList()
        })
      },
      appendNode(children){
        if(children.length<1){
          this.$message.error("该节点下无元素")
          return false;
        }
        let node =children[children.length-1]
        this.isAddParent=false
        this.isUpdate=false
        this.dialogFormVisible=true
        this.permissionParent.id=node.id+1
        this.permissionParent.menuCode=node.menuCode
        this.permissionParent.menuName=node.menuName
        this.permissionParent.permissionCode=''
        this.permissionParent.permissionName=''

      },
      removePermission(id){
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return this.api({
            url:`/user/removePermissionId/${id}`,
            method: 'get'
          })
        }).then(resp=>{
          this.$message.success("删除成功")
          this.getList()
        }).catch((response) => { // 失败
          if (response === 'cancel') {
            this.$message.info('已取消删除')
          } else {
            this.$message.error('删除失败')
          }
        })

      },
      showEdit(node){
        console.log(node)
        this.isUpdate =true
        this.isAddParent=false
        this.permissionParent =  Object.assign({}, node);//深拷贝
        this.dialogFormVisible=true

      },
      doPostData(){
        this.isUpdate? this.updatePermission():this.addPermission()
      },
      updatePermission() {

        this.api({
          url:`/user/updatePermission/`,
          method: 'post',
          data:this.permissionParent
        }).then(resp=>{
          this.$message.success("修改成功")
          this.dialogFormVisible=false
          this.permissionParent=tempData
          this.getList()
        })
      },
    }
  }
</script>
